<template>
  <div class="modal2">
    <div v-if="!isGet"
         class="modal2-content no-get">
      <div class="btn"
           @click="getHomeCoupon"></div>
    </div>
    <div v-else
         class="modal2-content have-get">
      <p class="article">会员卡已存入您{{userTel.substr(0,3) + 'xxxx' + userTel.substr(7)}}的账户中，请您在卡车之家极速版-配件商城中查看使用</p>
      <div class="btn"
           @click="goDowload"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isGet: {
      type: Boolean
    },
    userTel: {
      type: String
    }
  },
  data () {
    return {}
  },
  methods: {
    goDowload () {
      this.$emit('goDowload')
    },
    getHomeCoupon () {
      this.$emit('getHomeCard')
    }
  }
}
</script>
<style lang="less" scoped>
.modal2 {
  margin: -162px auto 0;
  .modal2-content {
    margin: 0 auto;
    width: 702px;
    height: 512px;
    background-size: 100% 100%;
    overflow: hidden;
  }
  .no-get {
    background: url(https://s-test.kcimg.cn/m/images/bbs/coupon/modal2_bg.png);
    .btn {
      margin: 388px auto 0;
      width: 440px;
      height: 86px;
      background: url(https://s-test.kcimg.cn/m/images/bbs/coupon/modal2_btn.png);
      background-size: 100% 100%;
    }
  }
  .have-get {
    width: 750px;
    background: url(https://s-test.kcimg.cn/m/images/bbs/coupon/get_modal2_bg.png);
    .article {
      box-sizing: border-box;
      margin-top: 266px;
      padding: 0 88px 0 84px;
      font-size: 28px;
      color: rgba(167, 56, 30, 1);
      line-height: 40px;
      text-align: center;
    }
    .btn {
      margin: 36px auto 0;
      width: 640px;
      height: 86px;
      background: url(https://s-test.kcimg.cn/m/images/bbs/coupon/get_modal2_btn.png);
      background-size: 100% 100%;
    }
  }
}
</style>
